<style scoped>
.site-wrapper {
    padding: 20px 0;
}

.bm-view {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
.amap-demo {
    height: 300px;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="site-wrapper">
            <Row>
                <Col span="8" offset="1">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Form-item label="机构名称" prop="productName">
                        <Input v-model="formItem.name"  placeholder="请输入机构名称"></Input>
                    </Form-item>
                    <Form-item label="机构简称" prop="plan">
                        <Input v-model="formItem.short_name"  placeholder="请输入机构简称"></Input>
                    </Form-item>
                    <!-- <Form-item label="所属公司" prop="select">
                        <Input v-model="formItem.c_name" disabled placeholder="请输入机构简称"></Input>
                    </Form-item> -->
                    <Form-item label="设立时间">
                        <Row>
                            <Col span="11">
                            <Date-picker @on-change="dateChange($event)" type="date" placeholder="选择日期" v-model="formItem.create_date_time"></Date-picker>
                            </Col>
                        </Row>
                    </Form-item>
                    <Form-item label="联系电话" prop="plan">
                        <Input v-model="formItem.tel" placeholder="请输入联系电话"></Input>
                    </Form-item>
                    <Form-item label="负责人" prop="plan">
                        <Input v-model="formItem.principal" placeholder="请输入负责人"></Input>
                    </Form-item>
                    <Form-item label="公司类型" prop="select">
                        <!-- <Input v-model="formItem.org_cate"  placeholder="请输入公司类型"></Input> -->
                        <Select v-model="formItem.org_cate" :value="formItem.org_cate" placeholder="请选择公司类型">
                            <Option value="总公司">总公司</Option>
                            <Option value="分公司">分公司</Option>
                            <Option value="支公司">支公司</Option>
                            <Option value="营销部">营销部</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="中资外资" prop="select">
                        <Select v-model="formItem.china_foreign" :value="formItem.china_foreign" placeholder="请选择中资外资">
                            <Option value="中资">中资</Option>
                            <Option value="外资">外资</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="注册地" prop="plan">
                        <Input v-model="formItem.registe_addr" placeholder="请输入注册地"></Input>
                    </Form-item>
                    <Form-item label="状态" prop="plan">
                        <Input v-model="formItem.status" placeholder="请输入状态"></Input>
                    </Form-item>
                    <Form-item label="所属地区" prop="plan">
                        <!-- <Input v-model="formItem.province_city_county" placeholder="请输入"></Input> -->
                        <Cascader :data="area_data" :value="formItem.area" trigger="hover" @on-change="areaChange" placeholder="请输入所属地区"></Cascader>
                    </Form-item>
                    <Form-item label="地址" prop="plan">
                        <!-- <Input v-model="formItem.address" placeholder="请输入地址"></Input> -->
                        <Input v-model="formItem.address"  placeholder="请输入详细地址">
                                <Button slot="append" @click="addressChange()">在地图中定位</Button>
                        </Input>
                    </Form-item>
                    <Form-item label="经纬度" prop="plan">
                        <Input v-model="lng_lat" placeholder="请输入经纬度"></Input>
                    </Form-item>
                    <!-- <baidu-map v-if="showMap" class="bm-view" :center="center" :scroll-wheel-zoom=true zoom="15" ak="8PuukfqnhGv9tZM6HiKrfDdjgsX7c8tD" @ready="baiduHandler">
                        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                        <bm-label content="我爱北京天安门" :position="{lng: 116.404, lat: 39.915}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me"/>                    
                    </baidu-map> -->
                    <baidu-map v-if="showMap" @click="mapclick($event)" class="bm-view" :center="center" :scroll-wheel-zoom=true zoom="15" ak="8PuukfqnhGv9tZM6HiKrfDdjgsX7c8tD" @ready="baiduHandler"> 
                    </baidu-map>  
                    <!-- <el-amap  vid="amapDemo"  class="amap-demo">
                    </el-amap> -->
                    <Form-item label="周一到周五">
                        <Input v-model="formItem.mon_to_fri" placeholder="请输入周一到周五空闲时间"></Input>
                    </Form-item>
                    <Form-item label="周六">
                        <Input v-model="formItem.saturday" placeholder="请输入周六空闲时间"></Input>
                    </Form-item>
                    <Form-item label="周日">
                        <Input v-model="formItem.sunday" placeholder="请输入周日空闲时间"></Input>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" shape="circle" style="padding:6px 24px;"  @click="handleSubmit('formItem')">提交</Button>
                        <Button type="default" shape="circle" style="padding:6px 24px;margin-left:15px"  @click="handleCancel()">取消</Button>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city from '../../asset/js/city'
import { BaiduMap } from 'vue-baidu-map'
import { getOrgDetail , updateOrgDetail} from '../../api/org'
export default {
    data() {
        return {
            
            showMap: false,
            BMap:{},
            map:{},
            address:'',
            formItem: {
                lat_lng: '',
                area: []
            },
            ruleValidate: {

            },
            area_data: city,
            center: {
                lng: 116.404,
                lat: 39.915
            }
        }
    },
    components: {
        productTitle,
        BaiduMap,
    },
    computed:{
        lng_lat:function(){
            return this.formItem.longitude+','+this.formItem.latitude
        }
    },
    created() {
        this.getSite()
    },
    mounted() {
        this.showMap = true;
    },
    methods: {
        // getMap() {
        //   // amap vue component
        //   console.log(amapManager._componentMap);
        //   // gaode map instance
        //   console.log(amapManager._map);
        // },
        dateChange(date){
            this.formItem.create_date = date
        },
        baiduHandler({ BMap, map }) {
            console.log(BMap)
            console.log(map)
            this.BMap = BMap
            this.map = map
            console.log(this.BMap)
            console.log(this.map)
            // this.center.lng = this.customer.longitude
            // this.center.lat = this.customer.latitude
            this.center.lng = 113.636552
            this.center.lat = 34.767174 
        },

        mapclick(event) {
            var _lng_lat = event.point.lng+','+event.point.lat
            console.log(event.point.lng+','+event.point.lat)
            //this.customer.home_lng = _lng_lat
            this.$set(this.formItem,'longitude',event.point.lng)
            this.$set(this.formItem,'latitude',event.point.lat)
        },
        areaChange(value, selectedData){
            //console.log(value)
            //console.log(selectedData)
            var _areatxt = ''
            for(var i = 0,len = selectedData.length;i<len;i++){
                _areatxt += selectedData[i].label
            }
            //console.log(_areatxt)
            this.address = _areatxt
            this.search_addr(_areatxt)
            this.formItem.province = value[0]
            this.formItem.city = value[1]
            this.formItem.county = value[2]
            this.formItem.province_name = selectedData[0].label
            this.formItem.city_name = selectedData[1].label
            this.formItem.county_name = selectedData[2].label

        },
        addressChange() {
            var _address = this.address + this.formItem.address
            //console.log(_address)
            this.search_addr(_address)
        },
        search_addr(addr){	
            var BMap = 	this.BMap
            var map = this.map		
            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(addr);
        },
        // areaChange(value, selectedData) {
        //     console.log(value)
        //     console.log(selectedData)
        //     this.formItem.area = value
        //     console.log(this.formItem.area)
        // },
        getSite() {
            let _id = this.$route.params.id
            if(_id > 0){
                var _site = {
                    oid:this.$route.params.id
                }
                new Promise((resolve, reject) => {
                    getOrgDetail(_site).then(response => {
                        if (response.data.err == 0) {
                            //console.log(response.data)
                            this.formItem = response.data.data
                            this.formItem.create_date_time = response.data.data.create_date
                            this.formItem.lat_lng = this.formItem.longitude + ',' + this.formItem.latitude
                            this.center.lng = this.formItem.longitude
                            this.center.lat = this.formItem.latitude
                            this.formItem.area = [this.formItem.province, this.formItem.city, this.formItem.county]
                        } else {

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }
            
        },
        handleSubmit(name) {
            new Promise((resolve, reject) => {
                updateOrgDetail(this.formItem).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success(response.data.info);
                        this.$router.push({ name: 'org_list' })
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        handleCancel(){
            this.$router.push({ name: 'org_list' })
        }
    }
}
</script>

